<template>
  <h4>{{ sayHi }}</h4>
  <h4>{{ count }}</h4>
  <button @click="clickCallback">点击一下！</button>
  <button @click="count++">+1</button>
  <div>姓名：<input type="text" v-model="person.name" /></div>
  <div>年龄：<input type="number" v-model="person.age" /></div>
  <div>薪资：<input type="number" v-model="person.job.salary" /></div>
</template>

<script>
import { reactive, ref, watchEffect } from "vue";

export default {
  name: "Demo",

  setup() {
    let sayHi = ref("你好呀!");
    let count = ref(0);

    const person = reactive({
      name: "张三",
      age: 44,
      job: {
        salary: 5000,
      }
    });

    const clickCallback = () => {
      sayHi.value += "!";
    };

    /**
     *  watchEffect
     * - 会自动扫描内部响应式数据，当响应式数据发生变化时，自动调用一次回调函数
     * - 组件挂载时自动调用一次
     */
    watchEffect(() => {
        const a = count.value
        const b = person.job.salary
        console.log("watchEffect 被调用了！")
    })

    return {
      sayHi,
      count,
      person,
      clickCallback,
    };
  },
};
</script>

<style></style>
